<template>
  <div class="department">
    <el-card shadow="always">
      <el-tabs v-model="activeName">
        <el-tab-pane label="组织结构" name="first">
          <el-row type="flex" justify="space-between">
            <el-col :span="6">
              <div class="grid-content bg-purple-dark">
                <h4>江苏传智播客教育科技有限公司</h4>
              </div></el-col
            >
            <el-col :span="6" class="right-col">
              <div class="grid-content bg-purple-dark">
                <span class="leader">负责人</span>
                <el-dropdown>
                  <span
                    >操作
                    <i class="el-icon-arrow-down"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                      <el-button type="text" @click="dialogFormVisible = true"
                        >添加子部门</el-button
                      ></el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </div></el-col
            >
          </el-row>
          <el-divider></el-divider>

          <el-tree
            :data="departs"
            :props="defaultProps"
            @node-click="handleNodeClick"
          >
            <template #default="{ data }">
              <el-row type="flex" class="tree-row" justify="space-between">
                <el-col :span="6">{{ data.name }}</el-col>
                <el-col :span="6"
                  >{{ data.manager }}
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      操作<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        ><el-button type="text" @click="addChildren(data)"
                          >添加子部门</el-button
                        ></el-dropdown-item
                      >
                      <el-dropdown-item
                        ><el-button type="text" @click="editDepartments(data)"
                          >查看部门</el-button
                        ></el-dropdown-item
                      >
                      <el-dropdown-item
                        ><el-button type="text" @click="deletDepartment(data)"
                          >删除部门</el-button
                        ></el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </template>
          </el-tree>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <depDialog
      :visible="dialogFormVisible"
      @update:visible="dialogFormVisible = $event"
      :form="form"
      @getData="getData"
      @resetData="resetData"
    ></depDialog>
  </div>
</template>

<script>
import depDialog from '@/views/departments/components/depDialog'
function formData (list, pid) {
  return list.filter(v => {
    if (v.pid == pid) {
      v.children = formData(list, v.id)
      return true
    } else {
      return false
    }
  })
}

import {
  getDepartments,
  getDepartmentById,
  deleteDepartmentById
} from '@/api/department'

export default {
  name: 'Departments',
  components: {
    depDialog
  },
  data () {
    return {
      dialogFormVisible: false,
      activeName: 'first',
      form: {
        code: '',
        introduce: '',
        manager: '',
        name: '',
        pid: '',
        id: ''
      },
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      departs: [
        {
          name: '总裁办',
          manager: '曹操',
          children: [{ name: '董事会', manager: '曹丕' }]
        },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }
      ]
    }
  },

  methods: {
    handleNodeClick (data) {
      // console.log(data)
    },

    async getData () {
      const res = await getDepartments()
      // console.log(res)
      // const res1 = res.depts.filter(v => v.pid !== '-1')
      // // console.log(res1)
      // const root = res1.filter(v => v.pid === '')
      // // console.log(root)
      // root.forEach(v => {
      //   v.children = res1.filter(value => value.pid === v.id)
      // })
      // console.log(root)
      // this.departs = root
      // console.log(res)

      this.departs = formData(res.depts, '')
    },
    async editDepartments (data) {
      this.dialogFormVisible = true
      const res = await getDepartmentById(data.id)
      // console.log(res)
      this.form = { ...res }
    },
    resetData () {
      this.form = {
        code: '',
        introduce: '',
        manager: '',
        name: '',
        pid: '',
        id: ''
      }
      this.dialogFormVisible = false
    },

    async addChildren (data) {
      // console.log(data)

      this.dialogFormVisible = true
      // const res = await addDepartments(data)
      // console.log(res)
      this.form.pid = data.id
    },
    async deletDepartment (data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await deleteDepartmentById(data.id)
          // console.log(res)
          this.getData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {})
    }
  },
  async created () {
    this.getData()
  }
}
</script>

<style lang="scss">
.department {
  .el-tabs__content {
    h4 {
      margin: 0;
    }
    .right-col {
      text-align: right;
    }
    .leader {
      padding: 0 10px 0 10px;
    }
  }
  .el-tree-node__content {
    // display: block;
    .tree-row {
      flex: 1;
    }
  }
}
</style>
